<style>
    .avatars{
        width: 60px;
        border-radius: 50%;
        height: 60px;
    }
    .flex{
        display: flex;
    }
    .bar{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #avatarHr{
        width:50px;
        height:2px;
        background-color:#d9d9d9;
        margin-top:30px;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div id="wuping">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><h4>行程明细(1)</h4></label>
            <div class="col-xs-12 col-sm-8">
                <!--<input id="c-1" class="form-control" data-rule="required" name="row[purpose]" type="text" value="">-->
            </div>
        </div>


        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('出差地点')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-site" class="form-control" data-rule="required" name="row[site][]" type="text" value="">
            </div>
        </div>


        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('开始时间')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-start_time" class="form-control datetimepicker" onblur="inputNums('c-start_time','c-end_time','c-day')"  data-rule="required"  name="row[start_time][]" type="text" value="" autocomplete="off" data-date-use-current="false" data-date-format="YYYY-MM-DD">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('结束时间')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-end_time" class="form-control datetimepicker" onblur="inputNums('c-start_time','c-end_time','c-day')"  data-rule="required"  name="row[end_time][]" type="text" value="" autocomplete="off" data-date-use-current="false" data-date-format="YYYY-MM-DD">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('时长(天)')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-day" class="form-control times" readonly="readonly" data-rule="required" name="row[day][]" type="text" value="0">
            </div>
        </div>


    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('总时长')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-time" class="form-control" readonly="readonly" data-rule="required" name="row[time]" type="text" value="0">
            <input class="btn btn-sm btn-success btn-append" type="button" id="new" value="增加行程明细" />
        </div>
    </div>

    <div style="border-top: 1px solid #93a1a1; padding-top: 10px; margin-right: 20px;box-sizing: border-box">
        <!--<h3 class="title" style="color: red;padding-left:20px">评论:</h3>-->
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('出差事由')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea name="row[msg]" rows="10" cols="67"></textarea>
        </div>
    </div>


    <div class="form-group">
        <label for="c-img" class="control-label col-xs-12 col-sm-2">{:__('图片')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-img"  data-rule="" class="form-control" size="50" name="row[images]" type="text" value="">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-avatar" class="btn btn-danger plupload" data-input-id="c-img" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="p-img"><i class="fa fa-upload"></i> 上传</button></span>
                    <span><button type="button" id="fachoose-avatar" class="btn btn-primary fachoose" data-input-id="c-img" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> 选择</button></span>
                </div>
                <span class="msg-box n-right" for="c-img"></span>
            </div>
            <ul class="row list-inline plupload-preview" id="p-img"></ul>
        </div>
    </div>


    <div style="border-top: 1px solid #93a1a1; padding-top: 10px; margin-right: 20px;box-sizing: border-box">
        <!--<h3 class="title" style="color: red;padding-left:20px">评论:</h3>-->
    </div>

    <div class="form-group">
        <label for="c-ids" class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('抄送人')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select id="c-ids" data-rule="required" data-live-search="true" multiple class="form-control selectpicker" name="row[ids][]">
                {foreach $arr as $index=>$vo}
                <option value="{$vo.id}">{$vo.nickname}</option>
                {/foreach}
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('审批人')}:</label>
        <div class="col-xs-12 col-sm-8 flex">
            {foreach $examine as $index=>$vo}
            <div class="bar">
                <img class="avatars" src="{$vo.avatar}">
                <h4 class="title nickname">{$vo.nickname}</h4>
            </div>
            {if condition="$index < $count-1"}
            <div id="avatarHr"></div>
            {/if}
            <input type="hidden" name="row[id][]" value="{$vo.id}">
            {/foreach}
        </div>
    </div>




    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<script src="/assets/img/jquery-3.4.1.min.js"></script>
<script>
    let x = 1;
    $("#new").off("click").on("click",function(){
        //$('#new').click(function(){
        x=x+1;
        //console.log(x);
         let html = `<div class="form-group">
           <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><h4>行程明细(`+x+`)</h4></label>
            <div class="col-xs-12 col-sm-8">
            </div>
        </div>


        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('出差地点')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-site" class="form-control" data-rule="required" name="row[site][]" type="text" value="">
            </div>
        </div>


        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('开始时间')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-start_time-`+x+`" class="form-control datetimepicker"  data-rule="required" onblur="inputNums('c-start_time-`+x+`','c-end_time-`+x+`','c-day-`+x+`')"  name="row[start_time][]" type="text" value="" autocomplete="off" data-date-use-current="false" data-date-format="YYYY-MM-DD">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('结束时间')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-end_time-`+x+`" class="form-control datetimepicker"  data-rule="required" onblur="inputNums('c-start_time-`+x+`','c-end_time-`+x+`','c-day-`+x+`')"  name="row[end_time][]" type="text" value="" autocomplete="off" data-date-use-current="false" data-date-format="YYYY-MM-DD">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;font-size: 15px">*</span>{:__('时长(天)')}:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-day-`+x+`" class="form-control times" readonly="readonly" data-rule="required" name="row[day][]" type="text" value="0">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <input class="btn btn-sm btn-danger btn-remove" type="button" onclick="news23(this)" id="news" value="删除" />
            </div>
        </div>

        </div>`;
         $("#wuping").append(html)
    });
    function news23(that){
         $(that).parent("div").parent("div").parent("div").remove();//指定div元素
        //$(that).remove();//指定tr元素

        let zong = 0;
        $(".times").each(function(){
            zong += Number($(this).val());
        });

        $("#c-time").val(zong);

    }



    function inputNums(time1,time2,day) {
        let time3 = '#'+time1;
        let time4 = '#'+time2;

        let  start_time = $(time3).val();
        let  end_time = $(time4).val();

        //console.log(start_time);
        //console.log(end_time);
        if(start_time&&end_time){
            handleDate(start_time,end_time,day)
        }
    }

    function handleDate(time1,time2,day){
        const d = new Date(time1)
        const d2 = new Date(time2)
        let value = (d2 - d)/(1*24*60*60*1000)
        let str = value.toString();
        let strIndex = str.indexOf('.');
        let time3;

        let days = '#'+day;

        if (strIndex === -1){
            time3 = str
        }else{
            time3 = str.substring(0, strIndex + 2)
        }

        $(days).val(time3);

        let zong = 0;
        $(".times").each(function(){
            zong += Number($(this).val());
        });

        $("#c-time").val(zong);

    }

</script>